/**
 * 表格表头吸顶指令
 * 使用方法: v-sticky-header 或 v-sticky-header="{ offset: 60 }"
 */

const stickyHeader = {
  bind(el, binding) {
    // 延迟执行，确保DOM已经渲染完成
    setTimeout(() => {
      stickyHeader.applyStickyStyles(el, binding)
    }, 100)
  },

  inserted(el, binding) {
    // DOM插入后再次执行
    setTimeout(() => {
      stickyHeader.applyStickyStyles(el, binding)
    }, 200)
  },

  componentUpdated(el, binding) {
    // 组件更新后重新应用样式
    setTimeout(() => {
      stickyHeader.applyStickyStyles(el, binding)
    }, 50)
  },

  applyStickyStyles(el, binding) {
    const options = binding.value || {}
    const offset = options.offset || 0

    // 查找表格元素
    const table = el.querySelector('.el-table') || el
    if (!table || !table.classList.contains('el-table')) {
      console.warn('v-sticky-header 指令只能用于包含 el-table 的元素')
      return
    }

    // 设置表头吸顶样式
    const headerWrapper = table.querySelector('.el-table__header-wrapper')
    const fixedLeftHeader = table.querySelector('.el-table__fixed .el-table__fixed-header-wrapper')
    const fixedRightHeader = table.querySelector('.el-table__fixed-right .el-table__fixed-header-wrapper')

    if (headerWrapper) {
      headerWrapper.style.position = 'sticky'
      headerWrapper.style.top = `${offset}px`
      headerWrapper.style.zIndex = '99'
      headerWrapper.style.background = '#fff'
      headerWrapper.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)'

      console.log('应用表头吸顶样式成功', { offset, element: headerWrapper })
    } else {
      console.warn('未找到表头元素')
    }

    if (fixedLeftHeader) {
      fixedLeftHeader.style.position = 'sticky'
      fixedLeftHeader.style.top = `${offset}px`
      fixedLeftHeader.style.zIndex = '100'
      fixedLeftHeader.style.background = '#fff'
      fixedLeftHeader.style.boxShadow = '2px 0 4px rgba(0,0,0,0.1)'
    }

    if (fixedRightHeader) {
      fixedRightHeader.style.position = 'sticky'
      fixedRightHeader.style.top = `${offset}px`
      fixedRightHeader.style.zIndex = '100'
      fixedRightHeader.style.background = '#fff'
      fixedRightHeader.style.boxShadow = '-2px 0 4px rgba(0,0,0,0.1)'
    }

    // 监听滚动事件，动态调整阴影
    const scrollContainer = table.querySelector('.el-table__body-wrapper')
    if (scrollContainer) {
      // 移除旧的事件监听器
      if (table._stickyScrollHandler) {
        scrollContainer.removeEventListener('scroll', table._stickyScrollHandler)
      }

      // 添加新的事件监听器
      table._stickyScrollHandler = () => {
        const isScrolled = scrollContainer.scrollTop > 0
        if (headerWrapper) {
          headerWrapper.style.boxShadow = isScrolled
            ? '0 2px 8px rgba(0,0,0,0.15)'
            : '0 2px 4px rgba(0,0,0,0.1)'
        }
      }
      scrollContainer.addEventListener('scroll', table._stickyScrollHandler)
    }
  },

  update(el, binding) {
    // 如果参数发生变化，重新绑定
    if (binding.value !== binding.oldValue) {
      stickyHeader.unbind(el)
      stickyHeader.bind(el, binding)
    }
  },

  unbind(el) {
    const table = el.querySelector('.el-table') || el
    if (!table.classList.contains('el-table')) return

    // 移除样式
    const headerWrapper = table.querySelector('.el-table__header-wrapper')
    const fixedLeftHeader = table.querySelector('.el-table__fixed .el-table__fixed-header-wrapper')
    const fixedRightHeader = table.querySelector('.el-table__fixed-right .el-table__fixed-header-wrapper')

    ;[headerWrapper, fixedLeftHeader, fixedRightHeader].forEach(element => {
      if (element) {
        element.style.position = ''
        element.style.top = ''
        element.style.zIndex = ''
        element.style.background = ''
        element.style.boxShadow = ''
      }
    })
  }
}

export default stickyHeader
